<script setup lang="ts" name="TodoList">
import TodoItem from '@/components/TodoItem/index.vue';
import { onMounted, ref } from 'vue';
import { v4 as uuid } from 'uuid';

type Task = {
  id: string;
  name: string;
  done: boolean;
};

const tasks = ref<Task[]>([
  {
    id: '001',
    name: '睡觉',
    done: false,
  },
  {
    id: '002',
    name: '打游戏',
    done: true,
  },
  {
    id: '003',
    name: '吃饭',
    done: false,
  },
]);

const changeStatus = (id: string) => {
  const newTasks = tasks.value.map(item => {
    if (item.id === id) {
      return {
        ...item,
        done: !item.done,
      };
    } else {
      return item;
    }
  });
  tasks.value = newTasks;
};

const inputRef = ref<HTMLInputElement | null>(null);
const isFocus = ref(false);
const taskName = ref('');

const addTask = (e: KeyboardEvent) => {
  if (e.code === 'Enter') {
    if (taskName.value.trim() === '') return;
    const task = {
      id: uuid(),
      name: taskName.value,
      done: false,
    };
    tasks.value = [task, ...tasks.value];
    taskName.value = '';
  }
};

const deleteTask = (id: string) => {
  const newTasks = tasks.value.filter(item => item.id !== id)
  tasks.value = newTasks
}

onMounted(() => {
  inputRef.value!.addEventListener('focus', () => {
    isFocus.value = true;
  });
  inputRef.value!.addEventListener('blur', () => {
    isFocus.value = false;
    taskName.value = '';
  });
});
</script>

<template>
  <div class="todo-page">
    <h3>Good evening Jetwang,</h3>
    <p>It's Tuesday, May 30 - 1 task</p>

    <div class="search" :class="{ isFocus: isFocus }">
      <label for=""></label>
      <input
        type="text"
        ref="inputRef"
        @keyup="addTask"
        v-model="taskName"
        placeholder="Create new task"
      />
      <div class="icons">
        <span>
          <svg
            t="1685443565544"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7295"
            width="200"
            height="200"
          >
            <path
              d="M213.333333 426.666667c-119.466667 0-213.333333-93.866667-213.333333-213.333333s93.866667-213.333333 213.333333-213.333333 213.333333 93.866667 213.333333 213.333333c0 25.6-17.066667 42.666667-42.666667 42.666667S341.333333 238.933333 341.333333 213.333333c0-72.533333-55.466667-128-128-128S85.333333 140.8 85.333333 213.333333s55.466667 128 128 128c25.6 0 42.666667 17.066667 42.666667 42.666667S238.933333 426.666667 213.333333 426.666667z"
              p-id="7296"
            ></path>
            <path
              d="M810.666667 426.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667c72.533333 0 128-55.466667 128-128s-55.466667-128-128-128-128 55.466667-128 128c0 25.6-17.066667 42.666667-42.666667 42.666667s-42.666667-17.066667-42.666667-42.666667c0-119.466667 93.866667-213.333333 213.333333-213.333333s213.333333 93.866667 213.333333 213.333333S930.133333 426.666667 810.666667 426.666667z"
              p-id="7297"
            ></path>
            <path
              d="M213.333333 1024c-119.466667 0-213.333333-93.866667-213.333333-213.333333s93.866667-213.333333 213.333333-213.333333c25.6 0 42.666667 17.066667 42.666667 42.666667s-17.066667 42.666667-42.666667 42.666667c-72.533333 0-128 55.466667-128 128s55.466667 128 128 128 128-55.466667 128-128c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667C426.666667 930.133333 332.8 1024 213.333333 1024z"
              p-id="7298"
            ></path>
            <path
              d="M810.666667 1024c-119.466667 0-213.333333-93.866667-213.333333-213.333333 0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667c0 72.533333 55.466667 128 128 128s128-55.466667 128-128-55.466667-128-128-128c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667c119.466667 0 213.333333 93.866667 213.333333 213.333333S930.133333 1024 810.666667 1024z"
              p-id="7299"
            ></path>
            <path
              d="M384 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L341.333333 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C426.666667 836.266667 409.6 853.333333 384 853.333333z"
              p-id="7300"
            ></path>
            <path
              d="M640 853.333333c-25.6 0-42.666667-17.066667-42.666667-42.666667L597.333333 213.333333c0-25.6 17.066667-42.666667 42.666667-42.666667s42.666667 17.066667 42.666667 42.666667l0 597.333333C682.666667 836.266667 665.6 853.333333 640 853.333333z"
              p-id="7301"
            ></path>
            <path
              d="M810.666667 426.666667 213.333333 426.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 426.666667 810.666667 426.666667z"
              p-id="7302"
            ></path>
            <path
              d="M810.666667 682.666667 213.333333 682.666667c-25.6 0-42.666667-17.066667-42.666667-42.666667s17.066667-42.666667 42.666667-42.666667l597.333333 0c25.6 0 42.666667 17.066667 42.666667 42.666667S836.266667 682.666667 810.666667 682.666667z"
              p-id="7303"
            ></path>
          </svg>
        </span>
        <span>
          <svg
            t="1685443694061"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="1627"
            width="200"
            height="200"
          >
            <path
              d="M320 64C249.4 64 192 121.4 192 192v640c0 70.6 57.4 128 128 128h448c35.4 0 64-28.6 64-64s-28.6-64-64-64H320V576h320c35.4 0 64-28.6 64-64s-28.6-64-64-64H320V192h448c35.4 0 64-28.6 64-64s-28.6-64-64-64H320z"
              p-id="1628"
            ></path>
          </svg>
        </span>
      </div>
    </div>

    <TodoItem v-for="item in tasks" :task="item" :key="item.id" @changeStatus="changeStatus" @deleteTask="deleteTask" />
  </div>
</template>

<style lang="scss" scoped>
.todo-page {
  max-width: 750px;
  margin: 0 auto;
  min-height: 80vh;
  padding-top: 48px;

  h3,
  p {
    line-height: 1.5;
  }

  h3 {
    font-size: 24px;
    font-weight: 500;
  }

  p {
    font-size: 16px;
    color: #b0b1b2;
    margin-bottom: 32px;
  }

  .search {
    width: 100%;
    position: relative;
    padding: 14px 16px;
    background-color: #e0e3e6;
    margin-bottom: 16px;
    border-radius: 16px;
    transition: 0.5s ease;

    label {
      position: absolute;
      left: 16px;
      top: 50%;
      transform: translateY(-50%);
      width: 20px;
      height: 20px;
      border-radius: 6px;
      background-color: #e9ecef;
      opacity: 0;
      cursor: pointer;
      transition: all 0.5s ease;
    }

    &.isFocus {
      background-color: #fff;
      padding-left: 48px;

      label {
        opacity: 1;
      }
    }

    input {
      width: 100%;
      outline: none;
      border: none;
      background-color: #e0e3e6;
      transition: 0.5s ease;
      font-size: 16px;

      &::placeholder {
        font-size: 16px;
      }
    }

    input:focus {
      background-color: #fff;
    }

    input:focus ~ .icons {
      display: none;
    }

    .icons {
      position: absolute;
      right: 16px;
      top: 50%;
      transform: translateY(-50%);

      display: flex;
      gap: 8px;

      span {
        display: inline-flex;
        background-color: #d4d7da;
        padding: 4px;
        border-radius: 4px;

        svg {
          width: 12px;
          height: 12px;
          fill: #70777e;
        }
      }
    }
  }
}

@media screen and (max-width: 749px) {
  .todo-page {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
  }
}
</style>
